import React, { Component } from 'react'

export default class Tick extends Component {
  constructor(props){
    super(props)
    // 初始化状态
    this.state = {
        left:this.props.num,

    }
    this.timer = setInterval(() => {
        // this.state.left--;
        // 不能直接改变状态：因为React无法监控到状态发生了变化

        // 必须使用this.setState({})改变状态

        // 一旦调用了this.setState，会导致当前组件重新渲染
        if(this.state.left === 0){
          clearInterval(this.timer)
          return
        }
        this.setState({
          left: this.state.left - 1,
        })
//         // 重新渲染

    }, 1000);
  }

  render() {
    return (
      <div>Tick: {this.state.left}</div>
    )
  }
}
